<template>
  <div>
    <center>
      <h1>选购图书</h1>
    </center>

    <center class="search">
      <el-input placeholder="请输入内容" v-model="search">
        <el-select v-model="type" slot="prepend" placeholder="请选择">
          <el-option label="书名" value="name"></el-option>
          <el-option label="作者" value="author"></el-option>
          <el-option label="出版社" value="house"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
      </el-input>
    </center>

    <el-table
      :data="booklst"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick">

      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        label="书名"
        prop="name"
        sortable
        sort-by="name">
      </el-table-column>

      <el-table-column
        label="作者"
        prop="author"
        sortable
        sort-by="author"
        :filters="authorFilter"
        :filter-method="authorFilterMethod">
      </el-table-column>

      <el-table-column
        label="出版社"
        prop="house"
        sortable
        sort-by="house"
        :filters="houseFilter"
        :filter-method="houseFilterMethod">
      </el-table-column>

      <el-table-column
        label="售价"
        prop="sellPrice"
        sortable
        sort-by="sellPrice">
        <template slot-scope="scope">
          {{ scope.row.sellPrice | price }}
        </template>
      </el-table-column>

    </el-table>
    <center class="cart">
      <el-button type="primary" @click="handleAdd2Cart" round>加入购物车</el-button>
    </center>
  </div>
</template>

<script>
import { MarketGetBooks } from '@/utils/request'
import { int2price } from '@/utils/format'
import ShoppingCart from '@/utils/ShoppingCart'

export default {
  data () {
    return {
      edit: false,
      type: 'name',
      search: '',
      selected: [],
      booklst: [],
      orgdata: []
    }
  },
  computed: {
    authorFilter () {
      var s = new Set()
      for (let item of this.booklst) {
        s.add(item.author)
      }
      var ret = []
      for (let item of s) {
        ret.push({
          text: item,
          value: item
        })
      }
      return ret
    },
    houseFilter () {
      var s = new Set()
      for (let item of this.booklst) {
        s.add(item.house)
      }
      var ret = []
      for (let item of s) {
        ret.push({
          text: item,
          value: item
        })
      }
      return ret
    }
  },
  filters: {
    price (value) {
      return int2price(value, true)
    }
  },
  methods: {
    fetchData () {
      // this.orgdata = Data
      return MarketGetBooks().then(rsp => {
        this.orgdata = rsp.data
      })
    },
    authorFilterMethod (value, row, column) {
      return value === row.author
    },
    houseFilterMethod (value, row, column) {
      return value === row.house
    },
    handleSelectionChange (value) {
      this.selected = value
    },
    handleRowClick (row, event, column) {
      this.$router.push({
        name: 'MarketDetail',
        params: {
          id: row.isbn
        }
      })
    },
    handleAdd2Cart () {
      ShoppingCart.addlist(this.selected)
      this.$notify({
        title: '已加入购物车'
      })
    },
    handleSearch () {
      if (this.search === '') {
        this.booklst = Object.assign([], this.orgdata)
      } else {
        let pool = []
        for (let item of this.orgdata) {
          if (item[this.type].search(this.search) > -1) {
            pool.push(item)
          }
        }
        this.booklst = pool
      }
    }
  },
  created () {
    this.fetchData().then(() => {
      this.handleSearch()
    })
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 130px;
}
.cart {
  padding: 2em;
}
</style>
